<template>
  <div class="updateprogram">
    <!-- -->
    <div class="con">
       <div class="leftcon">
         <div class="toptitle">
                <div class="mutitle">在线更新</div>
                <span></span>
          </div>
          <div class="boxcon">
              <span class="leftname">MD5码： </span>
              <el-input v-model="resource_address"  placeholder="请输入源地址" style="width:300px;margin-right:12px"></el-input>
              <!-- <el-button type="primary" class="last-el-button" @click="gengxinfn">更新</el-button> -->
          </div>
          <div class="boxcon">
              <span class="leftname">选择文件：</span>
              <input  type="file" ref="dianfileInput" accept=".bin"  @change="handleFileChange"  style="width:300px;margin-right:12px">
              <el-button type="primary" class="last-el-button" @click="gengxinfn">更新</el-button>
          </div>
       </div>
  
       <div class="el-loading-mask" v-show="diaisMask">
                                            <div class="el-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                </div>
                            </div>
    </div>
  </div>
</template>

<script>
import {updateProgram} from "../../api/dataComparisonApi";
import {pingSystem} from "../../api/forwardApi";

export default {


  data() {
    return {
       resource_address:"",
       diaisMask:false,
       binDiles:undefined
    };
  },

  mounted() {
    
  },

  methods: {
    handleFileChange(event){
      const files = event.target.files;
      this.binDiles = files[0]
      // console.log("this.binDiles",this.binDiles);
    },
    //在线更新
    gengxinfn(){
          if(this.resource_address === ""){
             this.$message({showClose: true,message: 'MD5码不能为空',type: 'warning'});
             return
          }
          if(this.binDiles == undefined){
             this.$message({showClose: true,message: '请选择bin文件',type: 'warning'});
             return
          }
          this.diaisMask = true
          var dd = {
             Md5:this.resource_address,
             files:"",
          }
          let formData = new FormData()
          formData.append('binfile', this.binDiles);
          dd.files = formData
          updateProgram(dd).then(res => {
            
            if(res.code == 200){
               this.$message({showClose: true,message: '更新成功，正在重启，请稍后...',type: 'success'});
               setTimeout(() => {
                this.viewChongqi()
               },10000)
            }else {
              this.diaisMask = false
               this.$message({showClose: true,message: '更新失败,'+res.msg,type: 'error'});
            }
            // this.$refs.dianfileInput.value = ""
          }).catch(() => {
             this.diaisMask = false
          })
          

    },
    //检查管理机是否重启完成
	 viewChongqi(){
		pingSystem().then(res => {
			// console.log("检查管理机心跳",res);
			if(res.code == 200){
				 this.diaisMask = false
				 this.$message({showClose: true,message: '重启成功',type: 'success'});
				  window.location.reload();
			}else {
				setTimeout(() => {
					this.viewChongqi()
			 	},2000)
			}
		}).catch(() => {
			 setTimeout(() => {
				 this.viewChongqi()
			 },2000)
		})
	 },
  },
};
</script>
<style lang="scss" scoped>
    .updateprogram {
         width: 100%;
         height: 100%;
         .con {
             width: 100%;
             height: 100%;
             display: flex;
             position: relative;
             .toptitle {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 12px;
              padding-bottom: 6px;
              border-bottom: 1px solid #ccc;
              width: 100%;
              height: 36px;
              .mutitle {
                 font-size: 14px;
              }
           }
             .leftcon {
                 width: 100%;
                 height: 100%;
                 border-radius: 4px;
                 background-color: #fff;
                 padding: 12px;
                 box-sizing: border-box;
                 .boxcon {
                     display: flex;
                     align-items: center;
                     margin: 20px 0px 0px 20px;
                     :deep(.el-button) {
                             padding: 10px 14px;
                     }
                 }
             }
             .rightcon {
                 width: calc(50% - 4px);
                 height: 100%;
                 border-radius: 4px;
                 background-color: #fff;
                 padding: 12px;
                 box-sizing: border-box;
             }
         }
         .leftname {
           width: 100px;
           text-align: right;
         }
    }
</style>